<template>
  <div style="max-height: 1000px;overflow: auto">
    <div class="status-bar primary-border" style="display: flex; border-bottom: 1px solid gainsboro;">
      <div v-for="(status, index) in statusList"
           :key="index"
           :class="['status-item', currentStatus === status.value ? 'active' : '']"
           @click="handleStatusChange(status.value)"
           style="flex: 1; text-align: center; padding: 10px 0; cursor: pointer; border-right: 1px solid #4CAF50;"
           :style="currentStatus === status.value ? 'background-color: rgb(138, 182, 96); color: white;' : 'color: #4CAF50;'">
        {{ status.label }}
      </div>
    </div>
    <orderList :data="orders" @getOrderList="getOrderList"></orderList>

  </div>
</template>

<script>
import {getAllOrder} from "@/api/order/order";
import orderList from '@/components/order/orderList'
export default {
  name: 'OrderListComponent',
  components:{orderList},
  data() {
    return {
      currentStatus: 0,
      statusList: [
        { label: '待付款', value: 0 },
        { label: '待发货', value: 1 },
        { label: '待收货', value: 2 },
        { label: '已完成', value: 3 },
        { label: '已关闭', value: 4 },
        { label: '已经失效', value: 5 }
      ],
      orders: []
    };
  },
  created() {
    this.getOrderList(0)
  },
  methods: {
    getOrderList(status) {
      this.$api.order.getAllOrder(status).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.orders = res.data
        }
      })
    },
    handleStatusChange(status) {
      this.getOrderList(status)
      this.currentStatus = status;
    },
    getActionButtonText(status) {
      const actionMap = {
        0: '付款',
        1: '催发货',
        2: '确认收货',
        3: '评价',
        4: '删除'
      };
      return actionMap[status] || '操作';
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.primary-color {
  color: rgb(138, 182, 96);
}

.primary-border {
  border-color: rgb(138, 182, 96);
}

.order-item {
  border: 1px solid rgb(138, 182, 96);
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 4px;
}

.order-item-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #E0E0E0;
}

.order-item-content {
  padding: 10px 0;
}

.order-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #E0E0E0;
}

.price {
  color: #4CAF50;
  font-weight: bold;
}

.btn {
  padding: 5px 15px;
  border: 1px solid #4CAF50;
  color: #4CAF50;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

.btn:hover {
  background: #4CAF50;
  color: white;
}
</style>
